<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特种车辆设备故障智能分析系统</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./vue.global.js"></script>
    <script src="./echarts.min.js"></script>
    <script src="./index.full.js"></script>
    <link rel="stylesheet" href="./AIChat.css">
    <link rel="stylesheet" href="./main.css">
    <link rel="stylesheet" href="./analysis.css">
    <script src="./AIChat.js"></script>
    <script src="./important.js"></script>
    <!-- 新增的特征分析模块JS文件 -->
    <script src="./TimeDomainChart.js"></script>
    <script src="./FrequencyChart.js"></script>
    <script src="./StftChart.js"></script>
    <script src="./WaveletChart.js"></script>
</head>
<body>
<div id="app">
    <div class="header">
        <div class="system-title">
            <h1>特种车辆设备故障智能分析系统</h1>
            <span class="version">V2.5</span>
        </div>
        <div class="system-info">
            <!-- 在设备选择框后添加AI诊断按钮 -->
            <el-button type="primary" @click="showAIDialog">AI诊断助手</el-button>
            <el-select
                    v-model="selectedDevice"
                    placeholder="请选择设备"
                    class="device-select"
                    @change="changeDevice"
            >
                <el-option
                        v-for="item in deviceOptions"
                :key="item"
                :label="item"
                :value="item"
                />
            </el-select>

            <div class="notification-area">
                <div class="connection-status">
                    <span class="status-indicator" :class="connectionStatusClass"></span>
                    {{ connectionStatusText }}
                </div>
                <div class="current-time">
                    <i class="el-icon-time"></i> {{ currentTime }}
                </div>
                <div class="notification-bell" @click="showMessages">
                    <el-icon :size="20"><Bell /></el-icon>
                    <div class="badge" v-if="unreadCount > 0">{{ unreadCount }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="dashboard">
        <div class="chart-container">
            <div class="chart-header">
                <h2><i class="el-icon-data-line"></i>设备运行状态实时监控</h2>
                <div class="chart-actions">
                    <el-button type="primary" size="small" @click="toggleChartData">切换指标</el-button>
                    <el-button type="info" size="small" @click="resetZoom">重置视图</el-button>
                </div>
            </div>
            <div class="chart" ref="chart"></div>
        </div>

        <div class="status-cards">
            <div class="status-card">
                <div class="card-header">
                    <el-icon><Monitor /></el-icon>
                    <h3>设备状态概览</h3>
                </div>
                <div class="card-content">
                    <div class="metric">
                        <div class="metric-title">设备状态</div>
                        <div class="metric-value" :class="deviceStatusClass">
                            {{ deviceStatus }}
                        </div>
                    </div>
                    <div class="metric">
                        <div class="metric-title">运行时间</div>
                        <div class="metric-value">{{ deviceRuntime }} 小时</div>
                    </div>
                    <div class="metric">
                        <div class="metric-title">当前温度</div>
                        <div class="metric-value">{{ currentMetrics.temperature }} °C</div>
                        <div class="fault-level level-medium" v-if="currentMetrics.temperature > 85">高温预警</div>
                    </div>
                    <div class="metric">
                        <div class="metric-title">振动幅度</div>
                        <div class="metric-value">{{ currentMetrics.vibration }} g</div>
                        <div class="fault-level level-high" v-if="currentMetrics.vibration > 5.0">严重振动</div>
                    </div>
                </div>
            </div>

            <div class="status-card">
                <div class="card-header">
                    <el-icon><Warning /></el-icon>
                    <h3>故障预警</h3>
                </div>
                <div class="card-content">
                    <div class="metric">
                        <div class="metric-title">今日故障</div>
                        <div class="metric-value">{{ faultStats.today }}</div>
                    </div>
                    <div class="metric">
                        <div class="metric-title">本周故障</div>
                        <div class="metric-value">{{ faultStats.week }}</div>
                    </div>
                    <div class="metric">
                        <div class="metric-title">待处理</div>
                        <div class="metric-value">{{ faultStats.pending }}</div>
                    </div>
                    <div class="metric">
                        <div class="metric-title">处理中</div>
                        <div class="metric-value">{{ faultStats.processing }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="info-container">
        <div class="info-panel">
            <div class="panel-header">
                <h3><el-icon><Tickets /></el-icon>设备信息</h3>
                <el-button type="primary" size="small" @click="refreshDeviceInfo">刷新</el-button>
            </div>
            <div class="table-container">
                <table>
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                        <th>状态</th>
                        <th>最后更新时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in deviceInfo" :key="index">
                        <td>{{ item.name }}</td>
                        <td>{{ item.value }}</td>
                        <td>
                            <span :class="item.statusClass">{{ item.status }}</span>
                        </td>
                        <td>{{ item.updateTime }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="info-panel">
            <div class="panel-header">
                <h3><el-icon><SetUp /></el-icon>故障与维修信息</h3>
                <el-button type="primary" size="small" @click="refreshFaultInfo">刷新</el-button>
            </div>
            <div class="table-container">
                <table>
                    <thead>
                    <tr>
                        <th>故障代码</th>
                        <th>描述</th>
                        <th>级别</th>
                        <th>时间</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="fault in faultInfo" :key="fault.id">
                        <td>{{ fault.code }}</td>
                        <td>{{ fault.description }}</td>
                        <td>
                            <span :class="fault.levelClass">{{ fault.level }}</span>
                        </td>
                        <td>{{ fault.time }}</td>
                        <td>{{ fault.status }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="footer">
        特种车辆设备故障智能分析系统
    </div>

    <!-- 消息弹窗 -->
    <el-dialog
            v-model="messageDialogVisible"
            title="系统消息"
            width="700px"
            class="message-dialog"
    >
        <div class="message-list">
            <div
                    v-for="message in messages"
                    :key="message.id"
                    class="message-item"
                    :class="{unread: !message.read}"
                    @click="readMessage(message)"
            >
                <div class="message-title">
                    <span class="message-dot" v-if="!message.read"></span>
                    <span :class="{'critical': message.type === 'critical', 'warning': message.type === 'warning'}">
                        {{ message.title }}
                    </span>
                </div>
                <div class="message-time">{{ message.time }}</div>
                <div class="message-content">{{ message.content }}</div>

                <div v-if="message.apiData" class="fault-map" style="color:white;">
                    <h4>AI诊断故障:</h4>
                    <div v-html="message.apiData"></div>
                </div>

                <div v-else class="message-content">
                    <div v-if="message.apiStatus === 'loading'" class="api-status">
                        <span class="loading-indicator"></span>
                        正在查询故障详情...
                    </div>
                    <div v-else-if="message.apiStatus === 'success'" class="api-status api-success">
                        <el-icon><SuccessFilled /></el-icon>
                        故障详情已加载
                    </div>
                    <div v-else-if="message.apiStatus === 'error'" class="api-status api-failure">
                        <el-icon><WarningFilled /></el-icon>
                        故障详情查询失败
                    </div>
                </div>

                <div class="message-footer">智能分析系统自动生成于 {{ message.time }}</div>
            </div>
        </div>
    </el-dialog>
    <!-- 新增AI诊断对话框 -->
    <el-dialog
            v-model="aiDialogVisible"
            title="AI故障诊断助手"
            width="800px"
            class="ai-diagnosis-dialog"
            :close-on-click-modal="false"
    >
        <div class="diagnosis-header">
            <span>与AI工程师对话，诊断设备故障</span>
            <span class="clear-history" @click="clearChatHistory">
                <el-icon><Delete /></el-icon> 清空对话
            </span>
        </div>
        <div class="chat-container">
            <div class="chat-messages" ref="chatMessages">
                <div v-for="(message, index) in chatHistory" :key="index"
                     class="message"
                     :class="message.role === 'user' ? 'user-message' : 'ai-message'">
                    <div class="message-header" :class="message.role === 'user' ? 'user-header' : 'ai-header'">
                        <el-icon v-if="message.role === 'user'"><User /></el-icon>
                        <el-icon v-else><Cpu /></el-icon>
                        {{ message.role === 'user' ? '我' : 'AI工程师' }}
                    </div>
                    <div class="message-content" v-html="formatMessage(message.content)"></div>

                    <div v-if="message.thinking" class="typing-indicator">
                        <span>思考中</span>
                        <span class="typing-dot"></span>
                        <span class="typing-dot"></span>
                        <span class="typing-dot"></span>
                    </div>
                </div>
            </div>

            <div class="chat-input">
                <textarea
                        v-model="userInput"
                        placeholder="输入您的问题，例如：如何解决发动机温度过高的问题？"
                        @keyup.enter.exact="sendMessage"
                ></textarea>
                <el-button
                        type="primary"
                        class="send-button"
                        @click="sendMessage"
                        :disabled="isSending"
                >
                    发送
                </el-button>
            </div>
        </div>
    </el-dialog>
</div>

<!-- 特征分析模块 -->
<div class="analysis-modules">
    <div class="analysis-module">
        <div class="module-header">
            <h3><i class="el-icon-data-analysis"></i>时域特征分析</h3>
        </div>
        <div class="module-content">
            <img id="time-domain-chart" alt="时域特征分析图" src="" />
            <div class="loading" id="time-domain-loading">加载中...</div>
            <div class="error" id="time-domain-error" style="display: none;">加载失败</div>
        </div>
    </div>

    <div class="analysis-module">
        <div class="module-header">
            <h3><i class="el-icon-data-analysis"></i>频域特征分析</h3>
        </div>
        <div class="module-content">
            <img id="frequency-chart" alt="频域特征分析图" src="" />
            <div class="loading" id="frequency-loading">加载中...</div>
            <div class="error" id="frequency-error" style="display: none;">加载失败</div>
        </div>
    </div>

    <div class="analysis-module">
        <div class="module-header">
            <h3><i class="el-icon-data-analysis"></i>STFT时频域特征分析</h3>
        </div>
        <div class="module-content">
            <img id="stft-chart" alt="STFT时频域特征分析图" src="" />
            <div class="loading" id="stft-loading">加载中...</div>
            <div class="error" id="stft-error" style="display: none;">加载失败</div>
        </div>
    </div>

    <div class="analysis-module">
        <div class="module-header">
            <h3><i class="el-icon-data-analysis"></i>小波变换特征分析</h3>
        </div>
        <div class="module-content">
            <img id="wavelet-chart" alt="小波变换特征分析图" src="" />
            <div class="loading" id="wavelet-loading">加载中...</div>
            <div class="error" id="wavelet-error" style="display: none;">加载失败</div>
        </div>
    </div>
</div>

<script src="main.js"></script>
</body>
</html>
